<template>
  <div class="menu_box">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#0d78be"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="routerPath"
    >
      <!-- <el-submenu v-for="(ele,index) in routerList" :key="index" :index="ele.path">
        <template slot="title">{{ele.name}}</template>
        <label v-for="(ele2,index2) in ele.children" :key="index2">
          <el-menu-item
          :index="ele2.path"
          @click="goRouter(ele2.path,ele2)"
          v-if="ele2.children.length<=0 || ele2.children == null"
          >{{ele2.name}}</el-menu-item>
          <el-submenu :index="ele2.path" v-else>
            <template slot="title">{{ele2.name}}</template>
            <el-menu-item
            v-for="(ele3,index3) in ele2.children"
            :key="index3"
            :index="ele3.path"
            @click="goRouter(ele3.path,ele3)"
            >
            {{ele3.name}}
            </el-menu-item>
          </el-submenu>
        </label>
      </el-submenu>-->
      <menu-tree :list="routerList"></menu-tree>
    </el-menu>
  </div>
</template>

<script>
import MenuTree from "./menu_tree";
export default {
  components: { MenuTree },
  data() {
    return {
      routerList: null,
      times: null,
      routerPath: ""
    };
  },
  watch: {
    $route() {
      this.routerPath = this.$route.path;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      console.log(this.$route.path);
    },
    goRouter(p, item) {
      console.log(this.$router);
      this.$router.push({ path: p });
    }
  },
  created() {
    if (sessionStorage.getItem("routerConfig")) {
      this.routerList = JSON.parse(
        sessionStorage.getItem("routerConfig")
      )[0].children;
    } else {
      this.times = setInterval(() => {
        if (sessionStorage.getItem("routerConfig")) {
          this.routerList = JSON.parse(
            sessionStorage.getItem("routerConfig")
          )[0].children;
          clearInterval(this.times);
        }
      }, 200);
    }
  }
};
</script>
<style>
.el-menu-demo li .el-submenu__title:first-child {
  font-size: 13px;
  height: 53px !important;
  line-height: 53px !important;
}
.el-menu-demo .is-active .el-submenu__title:first-child {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom: 0;
}
.el-menu.el-menu--horizontal {
  border: 0;
}
.el-menu-item {
  font-size: 13px !important;
}
.el-menu-item.is-active {
  color: #fff !important;
  background-color: #1890ff !important;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: #fff !important;
  background-color: #1890ff !important;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 0;
  color: #fff !important;
}
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 138px !important;
}
.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}
:focus {
  outline: 0;
}
/* 水平样式 */
.el-menu--horizontal > div > div > .el-submenu {
  float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal > div > div > .el-menu-item {
  float: left;
  height: 53px !important;
  line-height: 53px;
  margin: 0;
  border-bottom: 0;
  /* color: red; */
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal > div > div > .el-submenu .el-submenu__icon-arrow {
  display: none;
  /* position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -3px; */
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal > div > div > .el-submenu .el-submenu__title {
  height: 53px;
  line-height: 53px;
  border-bottom: 0;
  /* color: red; */
}
</style>
<style scoped>
.menu_box {
  padding: 0 30px;
}
</style>